﻿@page "/maps/default-functionalities"

@using Syncfusion.Blazor.Maps

@inherits SampleBaseComponent;

<SampleDescription>
   <p>This sample visualizes the continents in the world by rendering in a map layer. Also marks the office locations of YouTube in the world using markers.</p> 
</SampleDescription>
<ActionDescription>
   <p> In this example, you can see how to render a map with the provided GeoJSON data. You can bind the desired colors from the data source to the map shapes using <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_ColorValuePath'>ColorValuePath</a></code>. The marker templates are used to display the names for shapes. Legend is enabled in this example to represent each continent. Tooltip is enabled in this example. Title is provided in this example by using <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTitleSettings.html'>MapsTitleSettings</a></code>.</p>
   <p>More information about maps can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/maps/getting-started'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfMaps>
        <MapsLayers>
            <MapsLayer ShapeData='new {dataOptions ="data/maps/world-map.json"}' DataSource="@MapsLayerDataSource" TValue="MapDataSource"
                        ShapePropertyPath="@ShapePropertyPath" ShapeDataPath="@ShapeDataPath">
                <MapsMarkerSettings>
                    <MapsMarker TValue="MapMarkerDataSource" Visible="true" DataSource="@MarkerDataSource" Height="20" Width="20" Shape="MarkerType.Image"
                                ImageUrl="images/maps/ballon.png">
                        <MapsMarkerTooltipSettings Visible="true" ValuePath="Name" Format="State: ${Name} <br> Country: ${Country}"/>
                    </MapsMarker>
                </MapsMarkerSettings>
                <MapsShapeSettings ColorValuePath="Color"/>
            </MapsLayer>
        </MapsLayers>
        <MapsZoomSettings Enable="false"/>
        <MapsLegendSettings Visible="true"/>
        <MapsTitleSettings Text="YouTube office locations">
            <MapsTitleTextStyle Size="16px"/>
        </MapsTitleSettings>
    </SfMaps>
    <div class="urllink">
        Source:
        <a href="https://craft.co/youtube/locations" target="_blank">craft.co/youtube/locations</a>
    </div>
</div>

@code {    
    public string[] ShapePropertyPath = { "continent" };
    public string ShapeDataPath = "Continent";
    public class MapDataSource {
        public string Continent { get; set; }
        public string Color { get; set; }
    };
    public List<MapDataSource> MapsLayerDataSource = new List<MapDataSource> {
        new MapDataSource { Continent="North America", Color="#71B081" },
        new MapDataSource { Continent="South America", Color="#5A9A77" },
        new MapDataSource { Continent="Africa", Color="#498770" },
        new MapDataSource { Continent="Europe", Color="#39776C" },
        new MapDataSource { Continent="Asia", Color="#266665" },
        new MapDataSource { Continent="Australia", Color="#124F5E" }
    };
    public class MapMarkerDataSource {
        public double Latitude { get; set; }
        public double Longitude { get; set; }
        public string Name { get; set; }
        public string Country { get; set; }
    };
    public List<MapMarkerDataSource> MarkerDataSource = new List<MapMarkerDataSource> {
        new MapMarkerDataSource{ Latitude=37.6276571, Longitude=-122.4276688, Name="San Bruno", Country="United States" },
        new MapMarkerDataSource{ Latitude=33.5302186, Longitude=-117.7418381, Name="Laguna Niguel", Country="United States" },
        new MapMarkerDataSource{ Latitude=40.7424509, Longitude=-74.0081468, Name="New York", Country="United States" },
        new MapMarkerDataSource{ Latitude=-23.5268201, Longitude=-46.6489927, Name="Bom Retiro", Country="Brazil" },
        new MapMarkerDataSource{ Latitude=43.6533855, Longitude=-79.3729994, Name="Toronto", Country="Canada" },
        new MapMarkerDataSource{ Latitude=48.8773406, Longitude=2.3299627, Name="Paris", Country="‎France" },
        new MapMarkerDataSource{ Latitude=52.4643089, Longitude=13.4107368, Name="Berlin", Country="Germany" },
        new MapMarkerDataSource{ Latitude=19.1555762, Longitude=72.8849595, Name="Mumbai", Country="India" },
        new MapMarkerDataSource{ Latitude=35.6628744, Longitude=139.7345469, Name="Minato", Country="Japan" },
        new MapMarkerDataSource{ Latitude=51.5326602, Longitude=-0.1262422, Name="London", Country="England" }
    };
}